<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换练习</title>
</head>
<style type="text/css">
    *{margin: 0; padding: 0;}
    #outer{width: 500px; margin: 50px auto; padding: 10px; background-color: greenyellow; /*设置文本居中*/  text-align: center;}
</style>
<body>
<div id="outer">
    <p id="info"></p>
    <img src="../javaScript_03/img/01.jpg" alt="冰棍" />
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>

<script type="text/javascript">
    // 1. 获取两个按钮的对象
    const prev = document.getElementById("prev");
    const next = document.getElementById("next");

    // 3. 要切换图片就是修改img标签的属性
    let img = document.getElementsByTagName("img");
    for(let i = 0; i < img.length; i++) img = img[i];

    // 4. 创建一个数组用来保存图片的路径
    const imgArr = ['../javaScript_03/img/01.jpg', '../javaScript_03/img/02.jpg', '../javaScript_03/img/03.jpg', '../javaScript_03/img/04.jpg', '../javaScript_03/img/05.jpg'];

    // 5. 创建一个变量，用来保存当前正在显示的图片的索引
    let index = 0;

    // 6. 获取id为info的p元素
    const info = document.getElementById("info");

    // 7. 设置文字提示
    info.innerHTML = "一共 " + imgArr.length + " 张图片，当前是第 " + (index + 1) +" 张";

    // 2. 给两个按钮分别绑定单机响应函数
    prev.onclick = function () {
        // 切换到上一张，索引自减
        index --;

        // 判断index是否小于0
        if(index < 0){
            index = imgArr.length - 1;
        }
        img.src = imgArr[index];

        // 当点击按钮以后重新设置信息
        info.innerHTML = "一共 " + imgArr.length + " 张图片，当前是第 " + (index + 1) +" 张";
    };
    next.onclick = function () {
        // 切换到下一张，索引自增
        index ++;

        // 判断索引是否到最大
        if(index > imgArr.length - 1) {
            index = 0;
        }

        // 切换图片就是修改图片的属性，要修改一个元素的属性： 元素.属性 = 属性值
        img.src = imgArr[index];

        // 当点击按钮以后重新设置信息
        info.innerHTML = "一共 " + imgArr.length + " 张图片，当前是第 " + (index + 1) +" 张";
    };
</script>
</body>
</html>